<template>
  <div>    <el-button type="success" @click="dialogVisible = true">添加作者</el-button></div>
  <el-input v-model="findName" placeholder="请输入作家名字" style="width: 217px;"/> 
  <el-button type="success" @click="findByName(findName).then(res => {
    tableData = res.data.data
  })">查找</el-button>
  <div>
    
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="id    " width="180" />
    <el-table-column prop="name" label="Name" width="180" />

  </el-table>
  </div>

    <div class="example-pagination-block">

    <el-pagination @current-change="sizeChange"  :total="total" layout="prev, pager, next" :page-size="10" />

  </div>


  <el-dialog
    v-model="dialogVisible"
    title="添加作者"
    width="30%"
  >
    作者名字：
  <el-input v-model="name" placeholder="请输入" />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submit">
          提交
        </el-button>
      </span>
    </template>
  </el-dialog>

</template>

<script setup lang='ts'>
import { ref,reactive, toRefs, onBeforeMount, onMounted } from 'vue'
import { ElMessageBox } from 'element-plus'
import {saveAuthor,countAuthor,getByPage,findByName} from '../../api/author'
const dialogVisible = ref(false)
const name = ref()
const total = ref()
const tableData = ref()
const findName = ref()



countAuthor().then(res => {
   total.value = res.data.data
})
getByPage(0,10).then(res => {
    tableData.value = res.data.data
})
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确定关闭?')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
const sizeChange = (page:number) => {
    getByPage((page - 1) * 10 , 10).then(res => {
    tableData.value = res.data.data
})

}
const submit = () => {
    dialogVisible.value = false;
    saveAuthor(name.value).then(res => {
        console.log(res.data);
        
    })
}

</script>
<style scoped >
</style>